<template>
	<view class="uni-page-head" :style="[{backgroundColor:bgColor},{color:Color}]">
		<view class="uni-page-head-btn" @click="back">
			<svg width="26" height="26" viewBox="0 0 32 32">
				<path
					d="M21.781 7.844l-9.063 8.594 9.063 8.594q0.25 0.25 0.25 0.609t-0.25 0.578q-0.25 0.25-0.578 0.25t-0.578-0.25l-9.625-9.125q-0.156-0.125-0.203-0.297t-0.047-0.359q0-0.156 0.047-0.328t0.203-0.297l9.625-9.125q0.25-0.25 0.578-0.25t0.578 0.25q0.25 0.219 0.25 0.578t-0.25 0.578z"
					:fill="Color"></path>
			</svg>
		</view>
		<view class="uni-page-head-bd">
			<view class="uni-page-head__title"><text>{{title}}</text></view>
		</view>
		<view class="uni-page-head-ft"><text>{{rtext}}</text></view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const props = defineProps({
		bgColor: {
			type: String,
			default: 'rgb(248, 248, 248)'
		},
		Color: {
			type: String,
			default: '#000000'
		},
		title: {
			type: String,
			default: '详情'
		},
		rtext: {
			type: String,
			default: ''
		}
	})
	const back = () => {
		uni.navigateBack()
	}
</script>

<style scoped lang='scss'>
	.uni-page-head {
		position: fixed;
		left: var(--window-left);
		right: var(--window-right);
		height: 44px;
		height: calc(44px + constant(safe-area-inset-top));
		height: calc(44px + env(safe-area-inset-top));
		padding: 7px 3px;
		padding-top: calc(7px + constant(safe-area-inset-top));
		padding-top: calc(7px + env(safe-area-inset-top));
		display: flex;
		overflow: hidden;
		justify-content: space-between;
		box-sizing: border-box;
		z-index: 998;
		color: #fff;
		background-color: #000;
		transition-property: all;
	}

	.uni-page-head-btn {
		position: relative;
		width: auto;
		margin: 0 2px;
		word-break: keep-all;
		white-space: pre;
		cursor: pointer;
		font-size: 0px;
	}

	.uni-page-head-bd {
		position: absolute;
		left: 70px;
		right: 70px;
		min-width: 0;
		-webkit-user-select: auto;
		user-select: auto;
	}

	.uni-page-head__title {
		font-weight: bold;
		font-size: 16px;
		line-height: 30px;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.uni-page-head-ft {
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		font-size: 13px;
		margin: 0 20rpx;
	}
</style>